<template>
    <div class="coupon">
        <nut-tabs v-model="status" title-scroll title-gutter="10" name="tab" @click="changeTab">
            <nut-tab-pane v-for="(item, index) in tabList" :title="item.title + '(' + item.num + ')'">
                <scroll-view :scroll-y="true" style="width: 100%; height: 100%;" :upper-threshold="200"
                    :lower-threshold="200" :refresher-enabled="true" @scrolltolower="scrolltoLower">
                    <div class="tab-list" v-if="status == item.status">
                        <div class="tab-item flex" v-for="ele in couponList" :key="ele.id" v-if="couponList.length > 0"
                            @click="jumpTo(ele)">
                            <div class="left">
                                <div class="flex-a"><span>{{ ele.couponName }}</span>-<span>{{ ele.couponDesc }}</span>
                                </div>
                                <div>{{ ele.couponEndTime }}到期</div>
                            </div>
                            <div :class="status != 1 ? 'right show' : 'right'">
                                <div class="money"><text>￥</text>{{ ele.discount }}</div>
                                <div class="limit">满{{ ele.min }}可用</div>
                                <nut-button type="warning" openType="share" size="mini" v-if="status == 1"
                                    @click="onShare(ele)">去分享</nut-button>
                            </div>
                        </div>
                        <nut-empty v-else description="无数据"></nut-empty>
                    </div>
                </scroll-view>
            </nut-tab-pane>
        </nut-tabs>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter, useReachBottom, useShareAppMessage } from '@tarojs/taro';
import { Left } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
export default {
    components: {
        Left,
    },
    setup() {
        useShareAppMessage((res) => {
            var user = Taro.getStorageSync('user')
            if (res.from === 'button') {
                // 来自页面内转发按钮
                //console.log(res.target)
            }
            return {
                // title: data.detail.goodsName + '',
                path: '/pages/index/index?couponId=' + data.couponId + '&userId=' + user.userId,
            }
        })
        const data = reactive({
            tabList: [
                {
                    title: '未使用',
                    status: 0,
                    num: 0
                },
                {
                    title: '分享券',
                    status: 1,
                    type: 1,
                    num: 0
                },
                {
                    title: '已使用',
                    status: 2,
                    num: 0
                },
                {
                    title: '已失效',
                    status: 3,
                    num: 0
                }
            ],
            couponList: [],
            page: 1,
            limit: 10,
            status: 0,
            couponId: 0,
        });
        onMounted(() => {
            getCouponlists()
        });
        const changeTab = (title) => {
            data.page = 1
            data.couponList = []
            data.status = title.paneKey
            getCouponlists()
        }
        const scrolltoLower = (e) => {
            //console.log(e, '滚动到底部上拉加载')
        }
        useReachBottom(() => {
            //console.log('onReachBottom')
            data.page++
            getCouponlists()
        })
        const onShare = (item) => {
            //console.log(item.couponId)
            data.couponId = item.couponId
        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path });
        }
        const getCouponlists = () => {
            // getCouponlist({ page: data.page, limit: data.limit, status: data.status == 0 ? 0 : data.status == 2 ? 1 : data.status == 3 ? 2 : data.status == 1 ? 0 : '', type: data.status == 1 ? 1 : null }).then(res => {
            //     if (res.resultCode == 200) {
            //         data.tabList[data.status].num = res.data.totalCount
            //         data.couponList = data.couponList.concat(res.data.list)
            //     }
            // })
        }
        return {
            ...toRefs(data), changeTab, scrolltoLower, onShare, getCouponlists, jumpTo
        }
    }
};
</script>


<style lang="scss">
.coupon {
    .nut-tab-pane {
        background: #F9F9F9;
        padding: 20rpx 20rpx;
    }

    .tab-list {
        .tab-item {
            background: #fff;
            border-radius: 20rpx;
            margin-bottom: 20rpx;

            .left {
                width: 75%;
                padding: 30rpx 0 30rpx 30rpx;
                white-space: nowrap;

                div:first-child {
                    font-size: 26rpx;
                    margin-bottom: 10rpx;
                }

                div:last-child {
                    font-size: 26rpx;
                    color: #999;
                }
            }

            .right.show {
                padding: 30rpx 0 0 0;
            }

            .right {
                width: 25%;
                border-left: 1rpx dashed #E9E9E9;
                text-align: center;
                padding: 10rpx 0 0 0;
                // padding: 30rpx 0 0 0;

                .money {
                    font-size: 40rpx;
                    color: #FFAA0D;

                    text {
                        font-size: 26rpx;
                    }
                }

                .limit {
                    color: #999;
                    font-size: 22rpx;
                    margin-bottom: 5rpx;
                }

                .nut-button {
                    padding: 0rpx 10rpx;
                    font-size: 22rpx;
                    height: 40rpx;
                }
            }
        }
    }
}
</style>